<!--
 * @Author: 梁卓
 * @Date: 2022-02-23 16:02:17
 * @LastEditTime: 2022-02-25 10:37:29
 * @LastEditors: Please set LastEditors
 * @Description: 学生成绩情况
 * @FilePath: \dreamUi\src\views\exam\Record.vue
-->
<template>
    <div>
      <!-- 头部表格 -->
      <div>
        <el-card class="score_top">
          <div>
            <ScrrentStudentScoreEcharts/>
          </div>
          <div>
            <StudentScoreAvageEcharts/>
          </div>
        </el-card>
      </div> 
      <el-divider></el-divider>
      <div style = "width: 100%; height: 30px; margin-top: 20px;">
        <el-card>
          <el-row>
            <el-col :span="6">
              <el-input placeholder="请输要查询的学生姓名" v-model="queryInfo.queryString" clearable @clear="getAllStudentExamInfo"/>
            </el-col>
            <el-col :span="3" >
              <el-button type="primary" @click="getAllStudentExamInfo">搜索学生</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" border style="width: 100%;margin-bottom: 20px;">
            <el-table-column fixed prop="name" label="姓名"  />
            <el-table-column fixed prop="paperName" label="试卷标题"  />
            <el-table-column fixed prop="test" label="是否参与测试" />
            <el-table-column fixed prop="score" label="成绩" />
            <el-table-column fixed prop="startTime" label="开始测试时间" />
            <el-table-column fixed prop="spare" label="测试剩余时间" />
          </el-table>
            <el-pagination
              v-if="total > 0"
              :currentPage="queryInfo.currentPage"
              :page-sizes="[8,15,30,50]"
              :page-size= "queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total= total
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </el-card>
      </div>
    </div>
</template>
<script>
import ScrrentStudentScoreEcharts from '@/componets/echarts/CurrentStudentScore'
import StudentScoreAvageEcharts from '@/componets/echarts/StudentScoreAvage'
export default {
  name: 'Record',
  components: {ScrrentStudentScoreEcharts,StudentScoreAvageEcharts},
  data() {
    return {
      // 分页
      queryInfo: {
        pageNumber: 1,
        pageSize: 8,
        queryString: ''
      },
      total: 0,
      // 学期
      semester: '2020-2021',
      tableData: [],
      value: '',
      options: []
    };
  },

  mounted() {
    this.getAllStudentExamInfo()
  },

  methods: {
    timeFomate(cellValue) {
      if (cellValue == null || cellValue == "") return "";
      var date = new Date(cellValue);
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return ( hours + ":" + minutes + ":" + seconds );
    },
    // 获得所有学生的所有成绩信息
    getAllStudentExamInfo() {
      this.$ajax.post('/scoreInfo/getAllStudentExamInfo',this.queryInfo).then(res => {
        res.data.rows.forEach(item => {
          if (item.isTested) {
            item.test = '已参与';
          } else {
            item.test = '未参与';
          }
          item.spare = this.timeFomate(item.spareTime)
        });
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 改变页码
    handleSizeChange(param) {
      this.queryInfo.pageSize = param;
      // 重新赋值
      this.getAllStudentExamInfo();
    },
    // 改变当前的页面
    handleCurrentChange(param) {
      this.queryInfo.pageNumber = param;
      this.getAllStudentExamInfo();
    },
  },
};
</script>

<style scoped>
.score {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: -10px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.score_top div{
  float: left;
  margin-left: 30px;
  width: 580px;
  height: 400px;
}
</style>